<template>
  <div class="member-user-box">
    <img class="user-bg" :src="userBg" mode="aspectFill" />
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from './components/UserInfo'

export default {
  name: 'user',
  components: {
    UserInfo
  },
  data () {
    return {
      title: this.$route.query.title || '用户中心'
    }
  },
  watch: {
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
    userBg () {
      return 'https://qnimg.zowoyoo.com/img/84826/1612231416318.png'
      // return 'https://qnimg.zowoyoo.com/img/84826/1612231416520.png'
    }
  },
  methods: {
  },
  mounted () {
    const { title } = this.$route.query
    if (title) {
      this.title = title
      this.$setTitle(title)
    }
  },
  created () {
  }
}
</script>

<style lang="less">
.member-user-box {
  width: 100vw;
  min-height: 100vh;
  background-color: #f6f6f6;
  // 底部菜单栏距离
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    padding-bottom:calc(constant(safe-area-inset-bottom));
    padding-bottom:calc(env(safe-area-inset-bottom));
  }
  .user-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 140px;
  }

}
</style>
